<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    // 模型矩阵
    uniform mat4 u_ModelMatrix;
    // 视图矩阵
    uniform mat4 u_ViewMatrix;
    attribute vec4 a_Color;
    varying vec4 v_Color;
    void main() {
        gl_Position = u_ViewMatrix * u_ModelMatrix * a_Position;
        v_Color = a_Color;
    }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
    precision mediump float;
    varying vec4 v_Color;

    void main() {
        gl_FragColor = v_Color;
    }
</script>
<script type="module">
  import {initShaders} from './js/utils.js'
  import Poly from './js/poly02.js'
  import { Matrix4, Vector3 } from 'https://unpkg.com/three/build/three.module.js'

  const canvas = document.getElementById('canvas')
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  const gl = canvas.getContext('webgl')
  const vertexShader = document.getElementById('vertexShader').innerText
  const fragmentShader = document.getElementById('fragmentShader').innerText

  initShaders(gl, vertexShader, fragmentShader)

  gl.clearColor(0, 0, 0, 1)
  gl.clear(gl.COLOR_BUFFER_BIT)

  const verticeLib = [
    1.0, 1.0, 1.0,
    -1.0, 1.0, 1.0,
    -1.0, -1.0, 1.0,
    1.0, -1.0, 1.0,
    1.0, -1.0, -1.0,
    1.0, 1.0, -1.0,
    -1.0, 1.0, -1.0,
    -1.0, -1.0, -1.0,
  ];

  const indices = [
    0, 1,
    1, 2,
    2, 3,
    3, 0,

    0, 5,
    1, 6,
    2, 7,
    3, 4,

    4, 5,
    5, 6,
    6, 7,
    7, 4
  ];


  const source = [];
  indices.forEach(n => {
    const i = n * 3
    source.push(
      verticeLib[i] / 5,
      verticeLib[i + 1] / 5,
      verticeLib[i + 2] / 5,
      1,0,0,1
    )
  })

  const viewMatrix = new Matrix4().lookAt(
    new Vector3(0.2, 0.2, 1),
    new Vector3(0, 0, 0),
    new Vector3(0, 1, 0)
  )
  //模型矩阵
  const modelMatrix = new Matrix4()

  const poly = new Poly({
    gl,
    source: source,
    type: 'LINES',
    attributes: {
      a_Position: {
        size: 3,
        index: 0
      },
      a_Color:{
        size: 4,
        index: 3,
      },
    },
    uniforms:{
      u_ModelMatrix:{
        type: 'uniformMatrix4fv',
        value: modelMatrix.elements
      },
      u_ViewMatrix:{
        type: 'uniformMatrix4fv',
        value: viewMatrix.elements
      }
    }
  })

  gl.clear(gl.COLOR_BUFFER_BIT)
  poly.draw()

  let angle = 0;
  const minY = -0.7
  const maxY = 0.7
  let y = maxY
  let vy = 0
  const ay = -0.001
  const bounce = 1

  function update(){
    poly.updateAttribute()
    poly.updateUniform()
    gl.clear(gl.COLOR_BUFFER_BIT)
    poly.draw()
  }

  !(function ani() {
    angle += 0.02

    vy += ay
    y += vy

    modelMatrix.makeRotationY(angle)
    modelMatrix.setPosition(0, y, 0)

    if (modelMatrix.elements[13] < minY) {
      y = minY
      vy *= -bounce
    }

    update()
    requestAnimationFrame(ani)
  })()

</script>
</body>
</html>
